<template>
    <div class="parent" style="width: 100%;height: 100%">
        <div style="height: 100%;position: absolute;width: 100%;">
            <clock></clock>
        </div>
        <el-dialog :visible.sync="dialogFormVisible"
                   width="31%"
                   :before-close="handleClose">
            <div class="login" v-if="!forgetVisible">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="登录" name="login">
                        <h3 class="loginTitle">登录</h3>
                        <login-child @openForget="forgetVisibleValue"></login-child>
                    </el-tab-pane>
                    <el-tab-pane label="注册" name="register">
                        <h3 class="loginTitle">注册</h3>
                        <register></register>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div v-if="forgetVisible">
                <forget-password @openForget="forgetVisibleValue"/>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import loginChild from "../components/login/loginChild";
    import register from "../components/login/register";
    import clock from "../components/login/clock";
    import ForgetPassword from "../components/login/forgetPassword";

    export default {
        name: "Login",
        components: {
            ForgetPassword,
            loginChild,
            register,
            clock
        },
        data() {
            return {
                forgetVisible: false,           //是否打开找密码
                activeName: 'login',                 //标签页名称
                dialogFormVisible: false,       //是否打开登录窗口
                interval: null                  //定时器
            }
        },
        mounted() {
            //页面渲染时，执行定时器，循环获取clock中的数据，判断是否点击登录，打开登录窗口
            this.changeDialogFormVisible();
        },
        destroyed() {
            //页面销毁时，执行清除定时器
            clearInterval(this.interval)
        },
        methods: {
            //页面渲染时，执行定时器，循环获取clock中的数据，判断是否点击登录，打开登录窗口
            changeDialogFormVisible() {
                let that = this
                this.interval = setInterval(function () {
                    let dialogFormVisible = window.sessionStorage.getItem("dialogFormVisible")
                    if (dialogFormVisible) {
                        that.dialogFormVisible = true
                        clearInterval(that.interval)
                        window.sessionStorage.removeItem("dialogFormVisible");
                    }
                }, 200)
            },
            //关闭登录窗口
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        // this.dialogFormVisible = false;
                        this.changeDialogFormVisible();
                        done();
                    })
                    .catch(_ => {});
            },
            //获取子集传来的数据，控制是否打开找回密码
            forgetVisibleValue(value) {
                this.forgetVisible = value;
            }
        }
    }
</script>

<style scoped>
    .login {
        background-color: #ffffff;
        border-radius: 10px;
        /*width: 450px;*/
        padding: 20px 20px;
        /*height: 100%;*/
    }

    .el-dialog__body {
        padding: 0;
    }

    .loginButton {
        position: absolute;
        top: 50%;
        left: 49.7%;
        color: #112d46;
        background: #667d93;
        font-weight: bold;
        border: 1px #88a1b7 solid;
    }

    .loginTitle {
        text-align: center;
    }

    /*::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {*/
    /*    border: 1px solid #E4E7ED;*/
    /*    border-bottom: none;*/
    /*    border-radius: 4px 4px 0 0;*/
    /*    box-sizing: border-box;*/
    /*    left: 36%;*/
    /*    margin: auto;*/
    /*}*/

</style>
